{% extends 'base.html' %}

{% block title %}文本统计分析工具{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">文本统计分析工具</h1>
        <p class="text-gray-600">统计文本的字符数、单词数、行数和频率分析</p>
    </div>

    <div class="bg-white shadow-md rounded-lg p-6">
        <form method="post">
            <div class="mb-6">
                <label for="text" class="block text-sm font-medium text-gray-700 mb-2">输入文本</label>
                <textarea id="text" name="text" rows="8" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" oninput="updateCharCount()">{{ original_text or '' }}</textarea>
                <div class="mt-2 text-sm text-gray-500">
                    <span id="charCount">0</span> 个字符
                </div>
            </div>

            <div class="mb-6">
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    <i class="fas fa-calculator mr-2"></i>统计分析
                </button>
                <button type="button" onclick="clearText()" class="ml-2 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2">
                    <i class="fas fa-eraser mr-2"></i>清空
                </button>
            </div>
        </form>

        {% if stats %}
        <div class="mt-8">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">统计结果</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-blue-50 p-4 rounded-md text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ stats.char_count }}</div>
                    <div class="text-sm text-blue-800 mt-1">字符数</div>
                </div>
                <div class="bg-blue-50 p-4 rounded-md text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ stats.word_count }}</div>
                    <div class="text-sm text-blue-800 mt-1">单词数</div>
                </div>
                <div class="bg-blue-50 p-4 rounded-md text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ stats.line_count }}</div>
                    <div class="text-sm text-blue-800 mt-1">行数</div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-medium text-gray-800 mb-3">详细统计</h3>
                    <table class="w-full text-sm">
                        <tbody>
                            <tr class="border-b">
                                <td class="py-2 text-gray-600">不含空格的字符数</td>
                                <td class="py-2 text-right font-medium">{{ stats.char_count_no_spaces }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-2 text-gray-600">段落数</td>
                                <td class="py-2 text-right font-medium">{{ stats.paragraph_count }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-2 text-gray-600">句子数</td>
                                <td class="py-2 text-right font-medium">{{ stats.sentence_count }}</td>
                            </tr>
                            <tr class="border-b">
                                <td class="py-2 text-gray-600">平均单词长度</td>
                                <td class="py-2 text-right font-medium">{{ stats.avg_word_length }} 字符</td>
                            </tr>
                            <tr>
                                <td class="py-2 text-gray-600">阅读时间</td>
                                <td class="py-2 text-right font-medium">约 {{ stats.reading_time }} 分钟</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                {% if stats.word_frequency %}
                <div>
                    <h3 class="font-medium text-gray-800 mb-3">常用词频率</h3>
                    <div class="bg-gray-50 p-3 rounded-md">
                        <ul class="divide-y">
                            {% for word, count in stats.word_frequency %}
                            <li class="py-2 flex justify-between">
                                <span class="text-gray-700">"{{ word }}"</span>
                                <span class="font-medium">{{ count }} 次</span>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>

    <div class="mt-8 bg-blue-50 rounded-lg p-4">
        <h3 class="text-lg font-medium text-blue-800 mb-2">使用提示</h3>
        <ul class="list-disc pl-5 text-blue-700 space-y-1">
            <li>粘贴任意文本进行分析，包括文章、代码或其他文本内容</li>
            <li>单词统计基于空格和标点符号分隔，适用于多种语言</li>
            <li>对于中文文本，每个汉字将被视为一个单词进行统计</li>
            <li>词频分析会忽略常见的虚词（如"的"、"了"、"和"等）</li>
        </ul>
    </div>
</div>

<script>
function updateCharCount() {
    const text = document.getElementById('text').value;
    document.getElementById('charCount').textContent = text.length;
}

function clearText() {
    document.getElementById('text').value = '';
    updateCharCount();
}

// 初始化字符计数
document.addEventListener('DOMContentLoaded', function() {
    updateCharCount();
});
</script>
{% endblock %} 